import React from 'react';
import {
    Form,
    Input,
    Modal,
    notification
} from 'antd';
import CommonModalType from '@/platform/types/common-modal-type';
import equalValidator from '@/platform/validators/equal-validator';
import { RuleObject } from 'antd/lib/form';
import UserApi from '@/platform/apis/user-api';
import HttpResultUtils from '@/platform/commons/utils/http-result-util';
import classes from './UpdatePwd.module.less';
import DynamicIcon from '../dynamic-icon/DynamicIcon';


const UpdatePwd:React.FC<CommonModalType> = (props:CommonModalType) => {
    const [form] = Form.useForm();
    
    const handleCancel = () => {
        props.onCancel && props.onCancel();
    }

    const handleOk = () => {
        form.validateFields().then((values) => {
            UserApi.updateCurrentUserPassword(values).then((res) => {
                if (HttpResultUtils.isSuccess(res)) {
                    props.onCancel && props.onCancel();
                    notification.success({
                        message: '提示',
                        description: res.data.resultMsg
                    });
                } else {
                    HttpResultUtils.failureTipMsg(res);
                }
            });
        })
        props.onOk && props.onOk();
    }

    return (
        <Modal
            destroyOnClose 
            forceRender
            width={460}
            visible
            title={props.title}
            maskClosable={props.maskClosable}
            keyboard={props.keyboard}
            onCancel={handleCancel}
            onOk={handleOk}
        >
            <Form
                className={classes["app-update-pwd-form"]}
                form={form}
            >
                <Form.Item
                    name="password"
                    rules={[{
                        required: true,
                        message: '新密码必填!'
                    }]}
                >
                    <Input.Password placeholder="请输入新密码！" prefix={<DynamicIcon iconName="LockOutlined" />} />
                </Form.Item>

                <Form.Item
                    name="confPassword"
                    rules={[
                        ({ getFieldValue }) => ({
                            validator(rule: RuleObject, value: string) {
                                if (undefined === value || value.trim().length === 0) {
                                    return Promise.reject('确认密码必填！');
                                }
                                return equalValidator(rule, value, getFieldValue('password'), '密码与确认密码不一致！');
                            }
                        })]}
                >
                    <Input.Password placeholder="请输入确认密码！" prefix={<DynamicIcon iconName="LockOutlined" />} />
                </Form.Item>
            </Form>
        </Modal>
    );
};

UpdatePwd.defaultProps = {
    maskClosable: false,
    keyboard: false,
    title: "修改密码",
    onOk: () => {},
    onCancel: () => {}
}

export default UpdatePwd;
